<template>
  <div class="response-body">
    <div class="response-toolbar">
      <el-radio-group v-model="viewMode" size="small">
        <el-radio-button label="pretty">美化</el-radio-button>
        <el-radio-button label="raw">原始</el-radio-button>
        <el-radio-button label="preview">预览</el-radio-button>
      </el-radio-group>
      
      <div class="toolbar-actions">
        <el-button size="small" @click="copyContent">复制</el-button>
        <el-button size="small" @click="downloadContent">下载</el-button>
      </div>
    </div>

    <div class="response-content">
      <div v-if="viewMode === 'pretty'" class="pretty-view">
        <pre v-if="isJson" class="json-content">{{ formattedJson }}</pre>
        <pre v-else-if="isXml" class="xml-content">{{ formattedXml }}</pre>
        <pre v-else class="text-content">{{ data }}</pre>
      </div>
      
      <div v-if="viewMode === 'raw'" class="raw-view">
        <pre class="raw-content">{{ rawData }}</pre>
      </div>
      
      <div v-if="viewMode === 'preview'" class="preview-view">
        <div v-if="isHtml" v-html="data" class="html-preview"></div>
        <img v-else-if="isImage" :src="imageUrl" class="image-preview" />
        <div v-else class="text-preview">
          <p>无法预览此内容类型</p>
          <p>Content-Type: {{ contentType }}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ResponseBody',
  props: {
    data: {
      required: true
    },
    contentType: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      viewMode: 'pretty'
    }
  },
  computed: {
    isJson() {
      return this.contentType.includes('json')
    },
    
    isXml() {
      return this.contentType.includes('xml')
    },
    
    isHtml() {
      return this.contentType.includes('html')
    },
    
    isImage() {
      return this.contentType.includes('image')
    },
    
    formattedJson() {
      if (!this.isJson) return ''
      try {
        const parsed = typeof this.data === 'string' ? JSON.parse(this.data) : this.data
        return JSON.stringify(parsed, null, 2)
      } catch (e) {
        return this.data
      }
    },
    
    formattedXml() {
      return this.data
    },
    
    rawData() {
      return typeof this.data === 'string' ? this.data : JSON.stringify(this.data)
    },
    
    imageUrl() {
      if (!this.isImage) return ''
      if (typeof this.data === 'string' && this.data.startsWith('data:')) {
        return this.data
      }
      return `data:${this.contentType};base64,${this.data}`
    }
  },
  methods: {
    copyContent() {
      const text = this.viewMode === 'pretty' && this.isJson 
        ? this.formattedJson 
        : this.rawData
      
      navigator.clipboard.writeText(text).then(() => {
        this.$message.success('已复制到剪贴板')
      })
    },
    
    downloadContent() {
      const text = this.viewMode === 'pretty' && this.isJson 
        ? this.formattedJson 
        : this.rawData
      
      const blob = new Blob([text], { type: 'text/plain' })
      const url = URL.createObjectURL(blob)
      const a = document.createElement('a')
      a.href = url
      a.download = `response_${Date.now()}.txt`
      a.click()
      URL.revokeObjectURL(url)
    }
  }
}
</script>

<style lang="scss" scoped>
@import '../../../styles/variables.scss';

.response-body {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.response-toolbar {
  display: flex;
  justify-content: space-between;
  margin-bottom: $spacing-base;
}

.response-content {
  flex: 1;
  overflow: auto;
  background: #f5f5f5;
  border: 1px solid $border-color;
  border-radius: 4px;
  padding: $spacing-base;
  
  pre {
    margin: 0;
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
    font-size: 13px;
    line-height: 1.5;
    white-space: pre-wrap;
    word-wrap: break-word;
  }
  
  .html-preview {
    background: #fff;
    padding: $spacing-medium;
    border-radius: 4px;
  }
  
  .image-preview {
    max-width: 100%;
    height: auto;
  }
  
  .text-preview {
    text-align: center;
    color: $text-secondary;
    padding: $spacing-large;
  }
}
</style>